<template>
  <div style="background-color:#f0f2f5;margin-top:-30px;">
    <div class="atatistics—preview">
      <div class="homepage-header">
        <p class="title">今日数据</p>
        <el-row :gutter="20" type="flex" justify="space-between">
          <el-col>
            <div class="header-list" style="background-color:#4e9fec">
              <div>
                <section class="titleimg">
                  <svg-icon class-name="icon" icon-class="dengluyonghu" />
                </section>
                <section class="content">
                  <p class="subtitle">分校总数</p>
                  <p style="margin:0;color:#fff">
                    <span>{{ branchCampuNum }}</span> 个
                  </p>
                </section>
              </div>
            </div>
          </el-col>
          <el-col>
            <div class="header-list" style="background-color:#6bc57c">
              <div>
                <section class="titleimg">
                  <svg-icon class-name="icon" icon-class="xinzengzhuce" />
                </section>
                <section class="content">
                  <p class="subtitle">学员总数</p>
                  <p style="margin:0;color:#fff">
                    <span>{{ branchCampuStudentNum }}</span>人
                  </p>
                </section>
              </div>
            </div>
          </el-col>
          <el-col>
            <div class="header-list" style="background-color:#19aabf">
              <div>
                <section class="titleimg">
                  <svg-icon class-name="icon" icon-class="kechengxinzeng" />
                </section>
                <section class="content">
                  <p class="subtitle">所有课程</p>
                  <p style="margin:0;color:#fff">
                    <span>{{ branchCampuCourseNum }}</span>门
                  </p>
                </section>
              </div>
            </div>
          </el-col>
          <el-col>
            <div class="header-list" style="background-color:#8995ea">
              <div>
                <section class="titleimg">
                  <svg-icon class-name="icon" icon-class="xinzengxueyuan" />
                </section>
                <section class="content">
                  <p class="subtitle">班级总数</p>
                  <p style="margin:0;color:#fff">
                    <span>{{ branchCampuClassNum }}</span> 个
                  </p>
                </section>
              </div>
            </div>
          </el-col>
          <el-col>
            <div class="header-list" style="background-color:#ddbd65">
              <div>
                <section class="titleimg">
                  <svg-icon class-name="icon" icon-class="xinzenghuiyuan" />
                </section>
                <section class="content">
                  <p class="subtitle">直播总数</p>
                  <p style="margin:0;color:#fff">
                    <span>{{ branchCampuLiveNum }}</span>个
                  </p>
                </section>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="15">
        <el-col :span="24">
          <div class="home-indent">
            <el-row :gutter="1">
              <el-col :span="14">
                <div class="indent-left">
                  <home-line
                    id="home-line"
                    :style="lineStyle"
                    :line-data="lineStyleData"
                    :key="lineDataKey"
                    class-name="line"
                  />
                  <el-switch
                    :width="30"
                    v-model="lineStyleTime"
                    active-color="#409EFF"
                    active-value="month"
                    active-text="月"
                    inactive-color="#409EFF"
                    inactive-value="week"
                    inactive-text="周"
                  />
                </div>
              </el-col>
              <el-col :span="10">
                <div class="indent-right">
                  <home-pie
                    id="home-pie"
                    :style="pieStyle"
                    :pie-data="pieStyleData"
                    :key="pieDataKey"
                    class-name="pie"
                  />
                  <el-switch
                    :width="30"
                    v-model="pieStyleTime"
                    active-color="#409EFF"
                    active-value="month"
                    active-text="月"
                    inactive-color="#409EFF"
                    inactive-value="week"
                    inactive-text="周"
                  />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="15" style="margin-top:20px;">
        <el-col :span="24">
          <div class="home-task">
            <el-row :gutter="1">
              <el-col>
                <div class="task-left">
                  <home-bar
                    id="home-bar"
                    :style="barStyle"
                    :bar-data="barStyleData"
                    :key="barDataKey"
                    class-name="bar"
                  />
                  <el-switch
                    :width="30"
                    v-model="barStyleTime"
                    active-color="#409EFF"
                    active-value="month"
                    active-text="月"
                    inactive-color="#409EFF"
                    inactive-value="week"
                    inactive-text="周"
                  />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import HomeLine from './components/statistics/line'
import HomeBar from './components/statistics/bar'
import HomePie from './components/statistics/pie'
import { getTopData, getBranchCampusOrders, getBranchCampusPrice, getBranchCampusActive } from '@/api/branchCampus/branchCampus' // 数据接口
import { getTenantId } from '@/utils/auth'
export default {
  name: 'Homepage',
  components: {
    HomeLine,
    HomeBar,
    HomePie
  },
  data() {
    return {
      lineStyle: {
        width: '100%',
        height: '550px'
      },
      barStyle: {
        width: '100%',
        height: '550px'
      },
      pieStyle: {
        width: '100%',
        height: '500px'
      },
      lineStyleTime: 'week',
      lineStyleData: {},
      lineDataKey: 0,
      pieStyleTime: 'week',
      pieStyleData: {},
      pieDataKey: 0,
      allPieDataCount: 0,
      barStyleTime: 'week',
      barStyleData: {},
      barDataKey: 0,
      branchCampuNum: 0,
      branchCampuStudentNum: 0,
      branchCampuCourseNum: 0,
      branchCampuClassNum: 0,
      branchCampuLiveNum: 0
    }
  },
  watch: {
    lineStyleTime(newForm, oldForm) {
      this.getOrders()
    },
    pieStyleTime(newForm, oldForm) {
      this.getBranchCampusPrice()
    },
    barStyleTime(newForm, oldForm) {
      this.getBranchCampusActive()
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getTopData(getTenantId()).then(res => {
        this.branchCampuNum = res.data.result.branchCampuNum ? res.data.result.branchCampuNum : 0
        this.branchCampuStudentNum = res.data.result.branchCampuStudentNum ? res.data.result.branchCampuStudentNum : 0
        this.branchCampuCourseNum = res.data.result.branchCampuCourseNum ? res.data.result.branchCampuCourseNum : 0
        this.branchCampuClassNum = res.data.result.branchCampuClassNum ? res.data.result.branchCampuClassNum : 0
        this.branchCampuLiveNum = res.data.result.branchCampuLiveNum ? res.data.result.branchCampuLiveNum : 0
      })
      this.getOrders()
      this.getBranchCampusPrice()
      this.getBranchCampusActive()
    },
    getOrders() {
      getBranchCampusOrders(this.lineStyleTime, getTenantId()).then(res => {
        this.lineStyleData.dateArray = res.data.dateArray
        this.lineStyleData.dataArray = res.data.dataArray
        this.lineDataKey++
      })
    },
    getBranchCampusPrice() {
      getBranchCampusPrice(this.pieStyleTime, getTenantId()).then(res => {
        this.pieStyleData.dateArray = res.data.dateArray
        this.pieStyleData.dataArray = res.data.dataArray
        this.pieDataKey++
      })
    },
    getBranchCampusActive() {
      getBranchCampusActive(this.barStyleTime, getTenantId()).then(res => {
        this.barStyleData.dateArray = res.data.dateArray
        this.barStyleData.dataArray = res.data.dataArray
        this.barDataKey++
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.atatistics—preview {
  width: 100%;
  padding: 15px 15px 50px 15px;
  dl {
    clear: left;
  }
  dt,
  dd {
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .homepage-header {
    width: 100%;
    margin-bottom: 30px;
    .title {
      margin: 35px 0 20px 0;
      font-size: 19px;
      color: #55585e;
      font-weight: bold;
    }
    .header-list {
      width: 100%;
      height: 172px;
      border-radius: 5px;
      div {
        height: 132px;
        width: 100%;
        border-radius: 5px;
        .titleimg {
          border-radius: 50%;
          float: left;
          margin-top: 25px;
          text-align: center;
          background-color: rgba(11, 46, 85, 0.08);
          @media screen and (max-width: 1580px) {
            margin-left: 4.8%;
            width: 50px;
            line-height: 60px;
            height: 50px;
            .icon {
              width: 28px;
              height: 28px;
            }
          }
          @media screen and (min-width: 1581px) {
            margin-left: 6.8%;
            width: 70px;
            height: 70px;
            line-height: 95px;
            .icon {
              width: 38px;
              height: 38px;
            }
          }
        }
        .content {
          float: left;
          margin-top: 25px;
          @media screen and (max-width: 1580px) {
            margin-left: 10.8%;
            width: 70px;
            height: 50px;
            span {
              font-size: 20px;
            }
            .subtitle {
              margin-top: 0;
              color: #fff;
              margin-bottom: 5px;
            }
          }
          @media screen and (min-width: 1581px) {
            margin-left: 11.6%;
            width: 96px;
            span {
              font-size: 30px;
            }
            .subtitle {
              margin-top: 0;
              color: #fff;
              margin-bottom: 20px;
            }
          }
        }
      }
      .list-bottom {
        margin: 0;
        height: 39px;
        background-color: rgba(0, 19, 44, 0.2);
        line-height: 40px;
        padding: 0 8px;
      }
    }
    .header-list {
      @media screen and (max-width: 1580px) {
        height: 142px;
        div {
          height: 109px;
        }
        .list-bottom {
          height: 33px;
        }
      }
    }
  }
  .header-list:hover {
    box-shadow: 0 0 10px #898988;
    cursor: pointer;
  }
  .home-indent {
    width: 100%;
    height: 550px;
    .indent-left,
    .indent-right {
      width: 100%;
      height: 550px;
      background: #fff;
      position: relative;
      .line,
      .pie {
        padding: 15px 15px;
      }
      .el-switch {
        position: absolute;
        top: 22px;
        right: 12.5%;
      }
    }
  }
  .home-status {
    width: 100%;
    height: 229px;
    background-color: #fff;
    padding: 15px 15px 0 15px;
    box-sizing: border-box;
    .status-header {
      margin-bottom: 26px;
      span {
        font-size: 18px;
      }
    }
    dt {
      margin-bottom: 15px;
      font-size: 16px;
      color: #626669;
      line-height: 23px;
      .el-icon-warning:before {
        color: red;
        margin-right: 7px;
        font-size: 18px;
        height: 30px;
      }
      .el-icon-success:before {
        color: rgba(52, 248, 12, 0.966);
        margin-right: 7px;
        font-size: 18px;
      }
    }
    dd {
      float: right;
      margin-inline-start: 20px;
      font-size: 16px;
    }
    .danger {
      text-decoration: underline;
      color: #ff5e5e;
    }
  }
  .home-task {
    width: 100%;
    overflow: hidden;
    .task-left,
    .task-right {
      background: #fff;
      height: 550px;
      padding: 15px 15px 0 15px;
      position: relative;
      .bar {
        padding: 0px 0;
      }
      .el-switch {
        position: absolute;
        top: 22px;
        right: 8%;
      }
      .right-header {
        width: 100%;
        display: block;
        height: 54px;
        .el-tabs {
          .el-tabs__item {
            font-size: 18px;
          }
          .el-tabs__active-bar {
            transition: none;
          }
          .el-tabs__item.is-active {
            border-bottom: 2px solid #409eff;
          }
          .el-tabs__item:nth-child(2) {
            padding: 0;
          }
          .el-tabs__item:last-child {
            margin-left: 15px;
            padding: 0;
          }
          .el-tabs__nav-wrap::after {
            height: 0;
          }
        }
      }
      .el-table .cell {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        height: 28px;
        line-height: 28px;
      }
    }
  }
}
</style>

